<template>
	<view class="qiun-columns">
		<view class="qiun-charts-rotate">
			<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts-rotate" @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
		</view>
	</view>
</template>

<script>
import uCharts from '../../components/u-charts/u-charts.js';
var _self;
var canvaLineB = null;
export default {
	data() {
		return {
			cWidth2: '', //横屏图表
			cHeight2: '', //横屏图表
			pixelRatio: 1,
			textarea: ''
		};
	},
	onLoad() {
		_self = this;
		this.cWidth2 = uni.upx2px(650);
		this.cHeight2 = uni.upx2px(1100);
		this.getServerData();
	},
	methods: {
		getServerData() {
			this.request({
				url: 'WmsLog/sum',
				data: {
					code: this.vuex_user.warehouse
				},
				success: res => {
					let LineB = { categories: [], series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					let a = { name: '上架数', data: [] };
					let b = { name: '下架数', data: [] };
					res.data.forEach(m => {
						LineB.categories.push(m.createdBy);
						a.data.push(m.upQuan);
						b.data.push(m.inQuan);
					});
					LineB.series.push(a);
					LineB.series.push(b);
					_self.showLineB('canvasLineB', LineB);
				},
				fail: () => {
					_self.tips = '网络错误，小程序端请检查合法域名';
				}
			});
		},
		showLineB(canvasId, chartData) {
			canvaLineB = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				fontSize: 11,
				legend: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				rotate: true, //开启图表横屏
				categories: chartData.categories,
				enableScroll: true, //开启图表拖拽功能
				animation: false,
				series: chartData.series,
				xAxis: {
					disableGrid: false,
					type: 'grid',
					gridType: 'dash',
					itemCount: 8, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
					scrollShow: true, //新增是否显示滚动条，默认false
					scrollAlign: 'right'
					//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
					//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
				},
				yAxis: {
					//disabled:true
				},
				width: _self.cWidth2 * _self.pixelRatio,
				height: _self.cHeight2 * _self.pixelRatio,
				dataLabel: true,
				dataPointShape: true,
				extra: {
					line: {
						type: 'curve'
					}
				}
			});
		},
		touchLineB(e) {
			canvaLineB.scrollStart(e);
		},
		moveLineB(e) {
			canvaLineB.scroll(e);
		},
		touchEndLineB(e) {
			canvaLineB.scrollEnd(e);
			//下面是toolTip事件，如果滚动后不需要显示，可不填写
			canvaLineB.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		}
	}
};
</script>

<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts-rotate {
	width: 700upx;
	height: 1100upx;
	background-color: #ffffff;
	padding: 25upx;
}

.charts-rotate {
	width: 700upx;
	height: 1100upx;
	background-color: #ffffff;
}
</style>
